/**
 *  @auth: sce
 *  @date: 17-12-31
 *  @desc:
 **/

import React, {Component} from 'react'
import {Menu, Input, Icon, Dropdown} from 'semantic-ui-react'

import './Menu.css';

class MenuView extends Component {
    state = {
        activeURL : '.'
    };

    componentDidMount() {
        const {queryMenu} = this.props;
        queryMenu();
    }

    handleItemClick = (e, data) => {
        console.log(data);
    };

    render() {
        const menuStyle = {
            borderRadius:0,
            borderRight:0,
            borderTop:0
        }
        return (
            <Menu color="grey" style={menuStyle}  vertical>
                <Menu.Item>
                    <Input placeholder='Search...'/>
                </Menu.Item>
                {
                    this.props.data.map((menu, index) => {
                        const {path, icon, text, children, name} = menu;
                        let dom;
                        if (!children) {
                            dom = <Menu.Item
                                key={index}
                                name={name}
                                path={path}
                                active={this.state.activeURL === `${path.replace(/\//g, '.')}`}
                                onClick={this.handleItemClick}>
                                {icon ? <Icon name={icon}/> : null}
                                {text}
                            </Menu.Item>
                        } else {
                            dom = <Dropdown item text={text}
                                            key={index}>
                                    <Dropdown.Menu>
                                        {
                                            children.map((item, _index) => (
                                                <Dropdown.Item
                                                    name={item.name}
                                                    key={_index}
                                                    icon={`${item.icon}`}
                                                    text={item.text}
                                                    path={item.path}
                                                    onClick={this.handleItemClick}/>
                                            ))
                                        }
                                    </Dropdown.Menu>
                            </Dropdown>
                        }
                        return dom;
                    })
                }
            </Menu>
        )
    }
}

export default MenuView;